@charset "utf-8";

main {
    // overflow-y: scroll;
    position: relative;

    flex: 1;

    .video {
        width: 100%;
        height: 100%;

        background-color: #000;
    }

    // 步骤提示
    .video-part {
        position: absolute;
        bottom: 20px;
        left: 20px;

        color: #fff;
    }
}

footer {
    position: relative;

    height: 70px;

    /* 进度条 */
    .progress {
        width: 0;
        height: 70px;

        background-color: #4294ff;
    }

    /* 控制条 */
    .control {
        position: absolute;
        bottom: 0;
        left: 0;

        width: 100%;
        height: 70px;

        text-align: center;

        align-items: center;

        .iconfont {
            font-size: 30px;
        }
    }
}

// 蒙层
.mask {
    display: none;

    position: fixed;
    top: 0;
    left: 0;
    z-index: 5;

    padding: 50px 20px;
    width: 100%;
    height: 100%;

    background-color: rgba(30, 150, 205, .9);

    // 内容
    .mask-cont {
        margin: 0 auto;
        min-width: 280px;
        max-width: 960px;
    }

    // 控制区
    .mask-ctrl {
        margin-top: 60%;

        transform: translateY(-50%);
    }

    // 废话
    h3 {
        color: #fff;
    }

    // 按钮
    .mask-btns {
        margin-bottom: 50px;

        justify-content: space-around;

        .mask-btn {
            display: flex;

            border-radius: 50%;
            width: 120px;
            height: 120px;

            text-align: center;

            color: #fff;

            align-items: center;
            justify-content: center;
        }

        .goon-btn {
            background-color: #79f0c2;
        }

        .stop-btn {
            background-color: #ff6060;
        }
    }

    // 当前环节
    .current-part {
        overflow: hidden;

        border: 2px solid #e8e8e8;
        border-radius: 10px;

        background-color: transparent;

        div {
            width: 50%;
        }

        .current-part-pic {
            img {
                width: 100%;
                height: 100%;
            }
        }

        .current-part-text {
            padding: 20px;

            text-align: center;

            h4 {
                font-size: 20px;

                color: #e8e8e8;
            }

            p {
                margin-top: 20px;

                color: #fff;
            }
        }
    }
}
